<template>
  <div>
    <div class="outdiv biaoti">4s店管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

    <div class="XUAN" style="display: none">
      <template>
      <el-table id="out-table"  :data="xuanzhong" height="350" style="width: 100%">
        <el-table-column prop="stores_id" label="编号" width="50">
        </el-table-column>
        <el-table-column prop="stores_name" label="店铺名称" width="150">
        </el-table-column>
        <el-table-column prop="stores_short_name" label="短名称" width="120">
        </el-table-column>
        <el-table-column prop="brand_name" label="店铺主修车型" width="120">
        </el-table-column>
        <el-table-column prop="stores_discounts" label="店铺折扣" width="100">
        </el-table-column>
        <el-table-column prop="area_name" label="区域" width="100">
        </el-table-column>
        <el-table-column prop="stores_address" label="地址" >
        </el-table-column>
        <el-table-column prop="stores_sign" label="是否签约" width="80">
        </el-table-column>
      </el-table>
      </template>
    </div>

    <!--增加弹框-->
    <el-dialog title="增加4S店" :append-to-body="true" :visible.sync="addCarVisible" class="title" :close-on-click-modal="false">
          <el-form :aria-modal="addVal">

            <el-form-item label="店铺名称：" label-width="100">
              <el-input v-model="addVal.storesName" autocomplete="off" @blur="panD"></el-input>
              <div style="color: red">{{addtishi_a}}</div>
            </el-form-item>
            <el-form-item label="店铺短名称：" label-width="100">
              <el-input v-model="addVal.storesShortName" autocomplete="off" @blur="panDX"></el-input>
              <div style="color: red">{{addtishi_b}}</div>
            </el-form-item>

            <el-form-item label="主修车型：" label-width="100">
              <el-select v-model="addVal.xuanzeppai" placeholder="请选择">
                <el-option v-for="item in options" :key="item.brand_id" :label="item.brand_name" :value="item.brand_id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="店铺折扣：">
              <el-select v-model="addVal.storesDiscounts" value="9.5" class="xiala">
                <el-option label="9.5" value="9.5"></el-option>
                <el-option label="9" value="9"></el-option>
                <el-option label="8.5" value="8.5"></el-option>
                <el-option label="8" value="8"></el-option>
                <el-option label="7.5" value="7.5"></el-option>
                <el-option label="7" value="7"></el-option>
                <el-option label="6.5" value="6.5"></el-option>
                <el-option label="6" value="6"></el-option>
                <el-option label="5.5" value="5.5"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="4.5" value="4.5"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="3.5" value="3.5"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="2.5" value="2.5"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="1.5" value="1.5"></el-option>
                <el-option label="1" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所在区域：">
              <el-cascader :props="props" v-model="addVal.province"></el-cascader>
            </el-form-item>

            <el-form-item label="店铺地址：">
              <el-input v-model="addVal.storesAddress" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="是否签约：">
              <template>
                <el-radio v-model="addVal.radio" label="1">已签约</el-radio>
                <el-radio v-model="addVal.radio" label="2">未签约</el-radio>
              </template>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="quxiaoAdd">取 消</el-button>
            <el-button @click="yanzheng">验证</el-button>
            <el-button type="primary" :disabled=yan @click="queDin_Add">确定增加</el-button>
          </div>
        </el-dialog>
    <!--添加结束----------------------------------->

    <!--修改----------------------------->
    <el-dialog  title="修改4S店" :visible.sync="updezhuangtai" :append-to-body="true"
                :close-on-click-modal="false">
      <el-form :aria-modal="updaVal">

        <el-form-item label="店铺名称：" label-width="100">
          <el-input v-model="updaVal.u_storesName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺短名称：" label-width="100">
          <el-input v-model="updaVal.u_storesShortName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="主修车型：" label-width="100">
          <el-select v-model="updaVal.u_xuanzeppai" placeholder="请选择">
            <el-option v-for="item in upoptions" :key="item.brand_id" :label="item.brand_name"
                       :value="item.brand_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="店铺折扣：">
          <el-select v-model="updaVal.u_storesDiscounts" value="9.5" >
            <el-option label="9.5" value="9.5"></el-option>
            <el-option label="9" value="9"></el-option>
            <el-option label="8.5" value="8.5"></el-option>
            <el-option label="8" value="8"></el-option>
            <el-option label="7.5" value="7.5"></el-option>
            <el-option label="7" value="7"></el-option>
            <el-option label="6.5" value="6.5"></el-option>
            <el-option label="6" value="6"></el-option>
            <el-option label="5.5" value="5.5"></el-option>
            <el-option label="5" value="5"></el-option>
            <el-option label="4.5" value="4.5"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="3.5" value="3.5"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="2.5" value="2.5"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="1.5" value="1.5"></el-option>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在区域：">
          <el-cascader :props="props" v-model="updaVal.u_province"></el-cascader>
        </el-form-item>

        <el-form-item label="店铺地址：">
          <el-input v-model="updaVal.u_storesAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否签约：">
          <template>
            <el-radio v-model="updaVal.u_radio" label="已签约">已签约</el-radio>
            <el-radio v-model="updaVal.u_radio" label="未签约">未签约</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updezhuangtai=false">取 消</el-button>
        <el-button type="primary" @click="queDin_update">确定修改</el-button>
      </div>
    </el-dialog>
    <!--修改完成---------------------------->

    <div class="outdiv">
      <div class="lfloat  xiajuli">
        <el-input v-model="input" placeholder="请输入店铺名称" prefix-icon="el-icon-search"
          style="width: 400px;margin-right: 10px">
        </el-input>
        <el-button icon="el-icon-search" circle @click="chaxun(input)" type="primary" plain></el-button>
        <el-button icon="el-icon-refresh" circle @click="SGX" type="danger" plain></el-button>
      </div>
      <div class="rfloat xiajuli">
        <el-button type="primary" plain circle icon="el-icon-plus" @click="add4Sdian"></el-button>
        <el-tooltip content="导出数据" placement="top">
          <el-button type="warning" plain circle icon="el-icon-download" @click="exportExcel"></el-button>
        </el-tooltip>
        <el-tooltip content="取消选择" placement="top">
          <el-button @click="toggleSelection()" type="danger" plain icon="el-icon-close" circle></el-button>
        </el-tooltip>

      </div>
    </div>

    <div class="outdiv">
      <el-table ref="multipleTable" :data="tableData" height="350" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" v-loading="loading" element-loading-text="拼命加载中">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="stores_id" label="编号" width="50">
        </el-table-column>
        <el-table-column prop="stores_name" label="店铺名称" width="150">
        </el-table-column>
        <el-table-column prop="stores_short_name" label="短名称" width="120">
        </el-table-column>
        <el-table-column prop="brand_name" label="店铺主修车型" width="120">
        </el-table-column>
        <el-table-column prop="stores_discounts" label="店铺折扣" width="100">
        </el-table-column>
        <el-table-column prop="area_name" label="区域" width="100">
        </el-table-column>
        <el-table-column prop="stores_address" label="地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="stores_sign" label="是否签约" width="80">
        </el-table-column>


        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" plain circle icon="el-icon-s-grid" size="small" @click="updateData(scope)"></el-button>
            <el-button type="danger" plain circle icon="el-icon-delete" size="small" @click="delatData(scope)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  import * as api from '../../utils/api'
  
import FileSaver from "file-saver";
import XLSX from "xlsx";

  export default {
    name: "foursdian",
    data() {
      let myThis = this;
      return {
        addCarVisible: false,
        updezhuangtai: false,
        input: '',
        tableData: [],
        uptableData: [],
        xuanzhong:[],
        multipleSelection: [],
        addtishi_a: '',
        addtishi_b: '',
        updatishi_a: '',
        updatishi_b: '',
        yan: true,
        u_yan: true,
        addzhuangTai: false,
        addzhuangTaiDuan: false,
        addVal: {
          radio: '2', //是否签约
          storesAddress: '', //详细地址
          storesDiscounts: '', //店铺折扣
          storesName: '', //店铺名称
          province:'',//区域
          storesShortName: '', //店铺短名称
          storesType: 1, //店铺类型（4s店1，维修店2，快修店3）
          xuanzeppai: '', //店铺主修车型
        },
        updaVal: {
          u_radio: '', //是否签约
          u_storesAddress: '', //详细地址
          u_storesDiscounts: '', //店铺折扣
          u_storesName: '', //店铺名称
          u_storesShortName: '', //店铺短名称
          u_storesType: 1, //店铺类型（4s店1，维修店2，快修店3）
          u_xuanzeppai: '', //店铺主修车型
          u_province: '', //区域
          u_stores_id: '', //编号id
        },
        proven:[],
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const {
              level
            } = node;
            if (level === 0) {
              myThis.axios({
                url: api.GET_SELECT_ALLPROCINCE,
                methods: 'get',
              }).then(data => {
                // console.log(data)
                const nodes = data.data.data
                  .map(item => ({
                    value: item.province_id,
                    label: item.province_name,
                    leaf: level >= 2,
                  }));
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(nodes);
              });
            } else if (level === 1) {
              myThis.axios({
                url: api.GET_SELECT_ALLCITY,
                methods: 'get',
                params: {
                  provinceId: node.value
                }
              }).then(data => {
                // console.log(data)
                const nodes = data.data.data
                  .map(item => ({
                    value: item.city_id,
                    label: item.city_name,
                    leaf: level >= 2,
                  }));
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(nodes);
              });
            } else if (level === 2) {
              myThis.axios({
                url: api.GET_SELECT_ALLAREA,
                methods: 'get',
                params: {
                  cityId: node.value
                }
              }).then(data => {
                const nodes = data.data.data
                  .map(item => ({
                    value: item.area_city_id,
                    label: item.area_name,
                    leaf: level >= 2,
                  }));
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(nodes);
              });
            }
          }
        },
        loading: false,
        options: [],
        upoptions: [],
        value: '',
      }
    },

    created() {
      this.SGX();
    },
    methods: {
      SGX() {
        this.loading = true;
        this.input = '';
        this.tableData = [];
        this.axios({
          url: api.GET_findAll_ShopManage,
          methods: 'get',
        }).then(data => {
          this.loading = false;
          for (let i = 0; i < data.data.data.length; i++) {
            if (data.data.data[i].stores_sign === 1) {
              data.data.data[i].stores_sign = '已签约'
            } else {
              data.data.data[i].stores_sign = '未签约'
            }
            if (data.data.data[i].repair_shop_type_id === 1) {
              this.tableData.push(data.data.data[i]);
            }
          }
          // console.log(this.tableData)
        });
        this.xuanzhong=this.tableData;
      },
      chaxun(name) {
        this.loading = true;
        this.axios({
          url: api.GET_find_ShopManage,
          methods: 'get',
          params: {
            stores_name: name
          }
        }).then(data => {
          for (let i = 0; i < data.data.data.length; i++) {
            if (data.data.data[i].stores_sign === 1) {
              data.data.data[i].stores_sign = '已签约'
            } else if (data.data.data[i].stores_sign === 2) {
              data.data.data[i].stores_sign = '未签约'
            }
            this.tableData = [data.data.data[i]];
          }
          if (data.data.data.length === 0) {
            this.tableData = [];
          }
          this.loading = false;
        })
      },
      add4Sdian() {
        this.addCarVisible = true;
        this.axios({
          url: api.GET_FINDBRAND,
          methods: 'get',
        }).then(data => {
          this.options = data.data.data;
        })
      },
      panD() {
        this.addtishi_a = '';
        this.axios({
          url: api.GET_findAll_ShopManage,
          methods: 'get'
        }).then(data => {
          if (this.addVal.storesName !== '') {
            for (let i = 0; i < data.data.data.length; i++) {
              if (this.addVal.storesName === data.data.data[i].stores_name) {
                this.addtishi_a = '已有此门店';
                this.addzhuangTai = false;
              }
            }
            if (this.addtishi_a !== '已有此门店') {
              this.addzhuangTai = true;
              this.addtishi_a = '';
            }
          } else if (this.addVal.storesName === '') {
            this.addtishi_a = '请填写门店信息';
            this.addzhuangTai = false;
          }
        });

      },
      panDX() {
        this.addtishi_b = '';
        this.axios({
          url: api.GET_findAll_ShopManage,
          methods: 'get'
        }).then(data => {
          if (this.addVal.storesShortName !== '') {
            for (let i = 0; i < data.data.data.length; i++) {
              if (this.addVal.storesShortName === data.data.data[i].stores_short_name) {
                this.addtishi_b = '已有此短名称';
                this.addzhuangTaiDuan = false;
              }
            }
            if (this.addtishi_b !== '已有此短名称') {
              this.addzhuangTaiDuan = true;
              this.addtishi_b = '';
            }
          } else if (this.addVal.storesShortName === '') {
            this.addtishi_b = '请填写短名称';
            this.addzhuangTaiDuan = false;
          }
        });
      },
      yanzheng() {
        this.yan = !(this.addzhuangTai === true && this.addzhuangTaiDuan === true);
      },
      queDin_Add() {
        // console.log(this.addVal.province);
        this.axios({
          url: api.POST_add_ShopManage,
          methods: 'get',
          params: {
            area_city_id:this.addVal.province[2], //区域id
            brand_id: this.addVal.xuanzeppai, //店铺主修车型id
            repair_shop_type_id: this.addVal.storesType, //店铺类型（4s店1，维修店2，快修店3）
            stores_address: this.addVal.storesAddress, //"string",地址
            stores_discounts: Number(this.addVal.storesDiscounts), //店铺折扣
            stores_name: this.addVal.storesName, //"string",//店铺名称
            stores_short_name: this.addVal.storesShortName, //"string",店铺段名称
            stores_sign: Number(this.addVal.radio), //是否签约
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.$message({
              type: 'info',
              message: '添加成功'
            });
            this.addVal.radio = '2'; //是否签约
            this.addVal.storesAddress = ''; //详细地址
            this.addVal.storesDiscounts = ''; //店铺折扣
            this.addVal.storesName = ''; //店铺名称
            this.addVal.storesShortName = ''; //店铺短名称
            this.addVal.xuanzeppai = ''; //店铺主修车型
            this.addCarVisible = false; //弹框状态
            this.addVal.province='';//区域
            this.yan = true; //提交按钮状态
            this.addtishi_a='';
            this.addtishi_b='';
            this.SGX()
          } else {
            this.loading = false;
            alert('添加失败请再次尝试')
          }
        })
      },
      quxiaoAdd() {
        this.addVal.radio = '2'; //是否签约
        this.addVal.storesAddress = ''; //详细地址
        this.addVal.storesDiscounts = ''; //店铺折扣
        this.addVal.storesName = ''; //店铺名称
        this.addVal.storesShortName = ''; //店铺短名称
        this.addVal.xuanzeppai = ''; //店铺主修车型
        this.addCarVisible = false; //弹框状态
        this.yan = true; //提交按钮状态
        this.addVal.province='';//区域
        this.addtishi_a='';
        this.addtishi_b='';
      },
      delatData(dela) {
        this.$confirm('是否确认删除？', '确认删除', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认删除',
          cancelButtonText: '放弃删除'
        }).then(() => {
          this.loading = true;
          this.axios({
            url: api.POST_del_ShopManage,
            methods: 'post',
            params: {
              stores_id: dela.row.stores_id
            }
          }).then(data => {
            if (data.data.code === 200) {
              this.$message({
                type: 'info',
                message: '删除成功'
              });
              this.SGX()
            } else {
              this.loading = false;
              alert('删除失败请重试')
            }
          })
        })
      },
      updateData(scop) {
        this.proven=[];
        this.proven.push(scop.row.province_id);
        this.proven.push(scop.row.city_id);
        this.proven.push(scop.row.area_city_id);
        this.updezhuangtai = true;
        this.axios({
          url: api.GET_FINDBRAND,
          methods: 'get',
        }).then(data => {
          this.upoptions = data.data.data;
        });
        this.updaVal.u_radio = scop.row.stores_sign; //是否签约
        this.updaVal.u_storesAddress =scop.row.stores_address; //详细地址
        this.updaVal.u_storesDiscounts =scop.row.stores_discounts; //店铺折扣
        this.updaVal.u_storesName =scop.row.stores_name; //店铺名称
        this.updaVal.u_storesShortName =scop.row.stores_short_name; //店铺短名称
        this.updaVal.u_xuanzeppai =scop.row.brand_id; //店铺主修车型
        this.updaVal.u_province=this.proven;//区域
        this.updaVal.u_stores_id =scop.row.stores_id; //编号id
        this.updaVal.u_storesType = 1; //店铺类型（4s店1，维修店2，快修店3）
      },
      queDin_update() {
        let province_id = this.updaVal.u_province[2];
        let qianyueId;
        if (this.updaVal.u_radio === '已签约') {
          qianyueId = 1
        } else if (this.updaVal.u_radio === '未签约') {
          qianyueId = 2
        }
        let storesDiscounts = Number(String(this.updaVal.u_storesDiscounts));
        this.axios({
          url: api.POST_update_ShopManage,
          methods: 'get',
          params: {
            area_city_id: province_id,
            brand_id: this.updaVal.u_xuanzeppai,
            repair_shop_type_id: this.updaVal.u_storesType,
            stores_address: this.updaVal.u_storesAddress,
            stores_discounts: storesDiscounts,
            stores_id: this.updaVal.u_stores_id,
            stores_name: this.updaVal.u_storesName,
            stores_short_name: this.updaVal.u_storesShortName,
            stores_sign: qianyueId,
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.$message({
              type: 'info',
              message: '修改成功'
            });
            this.updezhuangtai = false;
            this.SGX()
          } else {
            this.loading = false;
            alert('修改失败请重试')
          }
        })
      },
      //定义导出Excel表格事件
      exportExcel() {
        /* 从表生成工作簿对象 */
        // console.log(document.querySelector("#out-table"));
        let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], {
              type: "application/vnd.ms-excel"
            }),
            //设置导出文件名称
            "4s店.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },


      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection);
        this.xuanzhong=this.multipleSelection
      }
    }
  }
</script>

<style scoped lang="less">
  body {
    margin: 0;
  }
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
</style>